<template>
    <svg :style="{ width, height }">
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script>
import { defineComponent } from "vue"

export default defineComponent({
    name: "index",
    props: {
        // xlink:href属性的前缀
        prefix: {
            type: String,
            default: "#icon-",
        },
        // 图标名
        name: {
            type: String,
            required: true,
            default: "",
        },
        // 颜色
        color: {
            type: String,
            default: "black",
        },
        // 宽
        width: {
            type: String,
            default: "20px",
        },
        // 高
        height: {
            type: String,
            default: "20px",
        },
    },
})
</script>

<style scoped></style>
